<template>
  <view class="container">
    <view class="file-list" v-if="dataList.length">
      <view class="file" v-for="file in dataList" :key="file.id">
        <view class="hd">
          <image :src="imgBaseUrlV2 + 'PDF.png'" mode="" class="pdf" />
        </view>
        <view class="bd">
          <view class="title text-title">
            {{ file.file_title }}
          </view>
          <view class="desc text-describe">
            {{ file.create_time }}
          </view>
        </view>

        <view class="ft" @click="_openFile(file, file.file_url)">
          <button class="btn btn-primary-white">打开</button>
        </view>
      </view>
    </view>

    <view class="no-data-box" v-else>
      <NoData title="暂无设备报告" status="no_order"></NoData>
    </view>
  </view>
</template>

<script>
import ViewModule from "@/common/mixins/view-module";
import { openFile } from "@/utils/index";
import { imgBaseUrlV2 } from "@/common/config/index";
import NoData from "@/components/public/noData/noData";
export default {
  mixins: [ViewModule],
  components: {
    NoData,
  },
  data() {
    return {
      mixinViewOptions: {
        getURL: "/getDeviceReportList",
        isPage: true,
        showLoading: true,
        reachBottom: false,
        createdIsNeed: false,
        pullDown: true,
      },
      imgBaseUrlV2,
      dataList: [],
      //  [
      //   {
      //     name: "2021-06月设备报告",
      //     createDate: "2021-06-30",
      //   },
      // ],
      form: {
        // url: "https://rhws.oss-cn-chengdu.aliyuncs.com/upload/test.pdf",
      },
    };
  },
  methods: {
    _openFile(file, url) {
      console.log(arguments, "?args");
      return uni.downloadFile({
        url,
        success: (res) => {
          return openFile({
            url: res.tempFilePath,
          });
        },
        fail: (err) => {
          console.log(err, "?err");
          return uni.showToast({
            title: "打开失败",
            icon: "none",
          });
        },
      });
    },
  },
  onLoad(e) {
    if (!e.device_id) {
      return this.showModal({
        content: "非法参数",
        showCancel: false,
        success: (r) => {
          this.$Router.go(-1);
        },
      });
    }
    this.dataForm.device_id = e.device_id;
    this.getDataList();
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';
@import '~@/common/stylus/mixins';

.container {
  min-height: calc(100vh - var(--window-top));
  background: linear-gradient(180deg, #0d1523 0%, #102945 100%);
}

.file-list {
  >.file {
    display: flex;
    align-items: center;
    padding: 10rpx;
    margin: 20rpx 24rpx 0;
    min-height: 160rpx;
    background: #1A3156;

    &:first-child {
      border: none;
    }

    >.hd {
      flex: 0 0 auto;
      padding: 0 10rpx;

      >.pdf {
        display: flex;
        width: 72rpx;
        height: 72rpx;
      }
    }

    >.bd {
      flex: 1;
      padding: 0 16rpx;
    }

    >.ft {
      color: color-active;
      padding: 0 10rpx;

      >.btn {
        width: 112rpx;
        font-size: 30rpx;
        height: 56rpx;
        line-height: 52rpx;
      }
    }

    .title {
      // font-size: 36rpx;
      color: color-white;
      margin-bottom: 10rpx;
    }

    .desc {
      // font-size: 28rpx;
      color: color-white;
    }
  }
}

.no-data-box {
  height: calc(100vh - var(--window-top));
}
</style>